<template>
  <div class="dashboard-container">
    <div class="dashboard-text">
      <el-card>
        <!-- 顶部 -->
        <el-row type="flex">
          <el-col>
            <el-button
              size="small"
              type="primary"
              @click="showDialog(-9999)"
            >添加客户</el-button>
          </el-col>
          <!-- 右边搜索 -->
          <el-col>
            <div style="margin-top: 15px">
              <el-input
                v-model="clientSec.name_contains"
                placeholder="请输入内容"
                class="input-with-select"
              >
                <el-select
                  slot="prepend"
                  v-model="clientSec.agent_contains"
                  placeholder="请选择"
                >
                  <el-option
                    :value="''"
                    :label="'全部经纪'"
                  />
                  <el-option
                    v-for="item in agentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
                <el-button slot="append" @click="selectFn">筛选</el-button>
              </el-input>
            </div>
          </el-col>
        </el-row>

        <!-- 表格 -->
        <el-table border :data="tableData" style="width: 100%">
          <el-table-column prop="image" label="图片" width="300">
            <template #default="{ row }">
              <img :src="row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="名称" width="120" />
          <el-table-column prop="email" label="邮箱" width="150" />
          <el-table-column prop="phone" label="电话" width="150" />
          <el-table-column prop="agent.name" label="经纪" width="150" />
          <el-table-column prop="wechat" label="微信" />
          <el-table-column prop="desc" label="介绍" width="200" />
          <el-table-column label="操作" type="flex" justify="center" width="160">
            <template #default="{ row }">
              <el-row type="flex" justify="center">
                <el-button
                  size="small"
                  type="primary"
                  @click="showDialog(row.id)"
                >编辑</el-button>
                <el-button
                  size="small"
                  type="danger"
                  @click="delClient(row.id)"
                >删除</el-button>
              </el-row>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-row type="flex" justify="center">
          <el-pagination
            :current-page="currentPage"
            :page-sizes="[1, 2, 3, 4]"
            :page-size="clientSec._limit"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
      </el-card>

      <!-- 弹框 -->
      <AddCust :is-show-dialog.sync="isShowDialog" :client-id="clientId" @update="updateFn" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getClient, delClient, clientCount } from '@/api/client'
import { getAgents } from '@/api/agent'
import AddCust from './components/Add-Cust.vue'
export default {
  name: 'Dashboard',
  components: { AddCust },
  data() {
    return {
      clientSec: {
        _limit: 2,
        _start: 0,
        name_contains: '',
        agent_contains: ''
      },
      currentPage: 1,
      isShowDialog: false, // 弹框
      tableData: [], // 客户信息展示列表
      agentList: [], // 经纪列表
      total: 0, // 分页总条数
      clientId: -9999// 弹框时所带的id
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },

  async created() {
    this.clientCount()
    this.getClient()
    this.getAgents()
    // this.getUsers()
  },
  methods: {
    // 点击分页条数
    handleSizeChange(pageSize) {
      this.clientSec._limit = pageSize
      this.clientSec._start = (this.currentPage - 1) * this.clientSec._limit
      this.getClient()
    },

    //  点击页码刷新
    handleCurrentChange(currentIndex) {
      this.clientSec._start = (currentIndex - 1) * this.clientSec._limit
      this.currentPage = currentIndex
      console.log(this.clientSec._start)
      this.getClient()
    },

    // 刷新
    updateFn() {
      this.getClient()
      this.clientCount()
    },
    // 总页数
    async clientCount(params) {
      const res = await clientCount(params)
      this.total = res.data
      console.log(129, '总条数', this.total)
    },
    // 经纪列表
    async getAgents() {
      const res = await getAgents()
      this.agentList = res.data
      // console.log(122, '经纪列表', this.agentList)
    },

    // 删除
    async delClient(id) {
      // 二次确认
      await this.$confirm('确定删除吗?')
      // 发送删除接口
      await delClient(id)
      // 提示用户
      this.$message.success('删除成功')
      if (this.tableData.length === 1 && this.total > 1) {
        this.currentPage--
        this.clientSec._start -= this.clientSec._limit
      }
      // 重新获取数据
      await this.getClient()
      await this.clientCount({
        _limit: this.clientSec._limit,
        _start: this.clientSec._start
      })
    },

    // 筛选客户信息
    async selectFn() {
      const { data } = await getClient(
        { _limit: 2,
          _start: 0,
          name_contains: this.clientSec.name_contains,
          agent_contains: this.clientSec.agent_contains || null
        })

      this.clientCount({
        _limit: 2,
        _start: 0,
        name_contains: this.clientSec.name_contains,
        agent_contains: this.clientSec.agent_contains || null
      })
      this.tableData = data
    },

    // 点击只是弹框
    showDialog(id) {
      this.isShowDialog = true
      this.clientId = Number(id)
      console.log(this.clientId)
    },

    // 获取客户信息
    async getClient() {
      // this.tableData = await getClient()
      const { data } = await getClient(
        { ...this.clientSec,
          agent_contains: this.clientSec.agent_contains || null
        }
      )
      this.tableData = data
      // this.clientCount()
      console.log('this.tableData', this.tableData)
    }

  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
    ::v-deep .el-select .el-input {
      width: 130px;
    }
    .input-with-select .el-input-group__prepend {
      background-color: #fff;
    }
  }
}
img {
  object-fit:contain;
  height: 250px;
  width: 250px;
}
</style>

